import React, {useState,useEffect} from 'react';
import {getProList, getCategory, searchPro, updateFlag} from '../../api/pro'
import {Table, Image, Switch, Select, Input, Button, message} from 'antd'
const Index = () => {
  // 所有数据
  const [proList,setProList] = useState()
  // 当前页
  const [current,setCurrent] = useState(1)
  // 提示文字
  const [sorterPrice,setSorterPrice] = useState('点击升序')
  // 提示文字
  const [sorterAscend,setSorterAscend] = useState('点击升序')

  const [messageApi,content] = message.useMessage()

  // 筛选用的列表
  const [category, setCategory] = useState()

  useEffect(()=>{
    getProList().then(res => {
      setProList(res.data)
    })

    // 获取所有分类
    getCategory().then(res => {
      console.log(res.data);
      const arr = []
      res.data.forEach(item => {
        arr.push({
          text: item,
          value: item
        })
      })
      setCategory(arr)
    })
  }, [])

  const columns = [
    {
      title: '序号',
      width: 60,
      render(t,r,i){
        return (<span>{(current - 1) * 5 + i + 1}</span>)
      }
    }, {
      title: '商品名称',
      width: 300,
      align: 'center',
      dataIndex: 'proname'
    },{
      title: '商品图片',
      dataIndex: 'img1',
      render(t){
        return (<Image src={t} height={50} />)
      }
    },{
      title: '商品分类',
      dataIndex: 'category',
      filters: category, // 筛选的数据源
      onFilter: (value, record) => record.category.indexOf(value) === 0, // 筛选条件
    },{
      title: '商品价格',
      dataIndex: 'originprice',
      sorter: (a, b) => a.originprice - b.originprice,
      showSorterTooltip:{
        title: sorterPrice
      }
    },{
      title: '商品折扣',
      dataIndex: 'discount',
      sorter: (a, b) => a.discount - b.discount,
      sortDirections: ['descend'],
      showSorterTooltip:{
        title: sorterAscend
      }
    },{
      title: '是否推荐',
      dataIndex: 'isrecommend',
      render(t, r){
        return (<Switch onChange={(e)=>{
          updateFlag({
            proid: r.proid,
            type: 'isrecommend',
            flag: e
          }).then(res => {
            messageApi.info(res.message)
          })
        }} defaultChecked={t} />)
      }
    },{
      title: '是否售卖',
      dataIndex: 'issale',
      render(t){
        return (<Switch defaultChecked={t} />)
      }
    },{
      title: '是否秒杀',
      dataIndex: 'isseckill',
      render(t){
        return (<Switch defaultChecked={t} />)
      }
    }

  ]


  // 根据条件和关键字查询出所需要的内容
  const [searchCategory,setSearchCategory] = useState()
  const [searchText,setSearchText] = useState()
  return (
    <div>
      {content}
      {/* 检索 */}
      <div style={{display: 'flex'}}>
        <Select onChange={(e)=>{
          // console.log(e);
          setSearchCategory(e)
          }} value={searchCategory} style={{width: 160}} placeholder='请选择商品类型' options={category} />
        <Input onChange={(e)=>{setSearchText(e.target.value)}} placeholder='请输入商品关键字' style={{width: 300}} />
        <Button onClick={()=>{
          // console.log(searchCategory,searchText);
          searchPro({
            category: searchCategory,
            search: searchText
          }).then(res => {
            // console.log(res);
            setProList(res.data)
          })

        }}>搜索</Button>
      </div>
{/* locale=[(
cancelsort:“点击取消排序"
triggerAsc:"点击升序"
triggerDesc:"点击降序"
}} */}
      <Table
      dataSource={proList}
      rowKey='proid'
      columns={columns}
      onChange={(p,f,s)=>{
        if(s.field === "originprice") {
          if (s.order === "ascend") {
            setSorterPrice('点击降序')
          }else if(s.order === 'descend'){
            setSorterPrice('取消排序')
          }else {
            setSorterPrice('点击升序')
          }
        }else {
          if (s.order === "ascend") {
            setSorterAscend('点击降序')
          }else if(s.order === 'descend'){
            setSorterAscend('取消排序')
          }else {
            setSorterAscend('点击升序')
          }
        }

      }}
      pagination= {{
        defaultPageSize: 5,
        onChange(count){
          // console.log(count);
          setCurrent(count)
        }
      }}
      scroll={{
        y: 400,
        x: 1300
      }}
       />;


    </div>
  );
};

export default Index;
